<template>
    <div class="carousel-container">
        <div class="carousel" @mouseenter="pauseAutoPlay" @mouseleave="startAutoPlay">
            <div class="slides-wrapper">
                <div v-for="(slide, index) in slides" :key="index" class="slide"
                    :class="{ active: currentIndex === index }">
                    <img :src="slide.image" :alt="slide.alt || 'carousel-image'" class="slide-image">
                </div>
            </div>

            <!-- 导航箭头 -->
            <!-- <button class="nav-arrow prev" @click="prevSlide">&lt;</button>
            <button class="nav-arrow next" @click="nextSlide">&gt;</button> -->

            <!-- 指示点 -->
            <div class="pagination-dots">
                <span v-for="(dot, index) in slides" :key="index" class="dot"
                    :class="{ active: currentIndex === index }" @click="goToSlide(index)"></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Banner',
    props: {
        slides: {
            type: Array,
            required: true,
            validator: value => value.every(item => item.image)
        },
        interval: {
            type: Number,
            default: 5000
        }
    },
    data() {
        return {
            currentIndex: 0,
            timer: null
        }
    },
    mounted() {
        this.startAutoPlay()
    },
    beforeDestroy() {
        this.clearTimer()
    },
    methods: {
        nextSlide() {
            this.currentIndex = (this.currentIndex + 1) % this.slides.length
        },
        prevSlide() {
            this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length
        },
        goToSlide(index) {
            this.currentIndex = index
        },
        startAutoPlay() {
            this.clearTimer()
            this.timer = setInterval(() => {
                this.nextSlide()
            }, this.interval)
        },
        pauseAutoPlay() {
            this.clearTimer()
        },
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        }
    }
}
</script>

<style scoped>
.carousel-container {
    max-width: 1540px;
    width: calc(100% - 40px);
    margin: 0 auto 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 41.7%;
}

.slides-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide.active {
    opacity: 1;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pagination-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.dot {
    width: 30px;
    height: 4px;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 2px;
}

.dot.active {
    background: rgba(255,255,255,0.9);
    width: 40px;
}

@media (max-width: 768px) {
    .carousel-container {
        width: calc(100% - 20px);
        margin-bottom: 20px;
    }
    
    .dot {
        width: 20px;
        height: 3px;
    }
    
    .dot.active {
        width: 25px;
    }
}
</style>